.page-footer {
  background-color: $basic_grey;
}

.page-footer__wrapper {
  display: flex;
  flex-direction: column;

  @media (min-width: $tablet-width) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-block: 58px 55px;
  }
}

.page-footer__logo {
  position: relative;
  margin-block: 39px 32px;
  text-align: center;

  @media (max-width: $mobile-width-only) {
    &::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -32px;
    inline-size: 100%;
    block-size: 2px;
    background-color: #D9D9D9;
  }
}

  &:hover {
    fill-opacity: 0.8;
  }

  &:active {
    fill-opacity: 0.6;
  }

  @media (min-width: $tablet-width) {
    margin: 0;
    padding-block: 5px;
  }
}

.page-footer__list {
  position: relative;  
  margin-block: 20px 21px;
  padding: 0;
  text-align: center;
  list-style-type: none;

  @media (max-width: $mobile-width-only) {
    &::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -21px;
    inline-size: 100%;
    block-size: 2px;
    background-color: #D9D9D9;
  }
}

    @media (min-width: $tablet-width) {
    margin: 0;
  }
}

.page-footer__copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 22px;
  font-size: 16px;
  text-decoration: none;
  color: $special_dark_grey;

  &:hover .page-footer__icon {
    fill: $basic_green;
  }

  &:active {
    opacity: 0.3;
  }

  &:active .page-footer__icon {
    fill-opacity: 0.3;
  }

  @media (min-width: $tablet-width) {
    margin: 0;
  }
}

.page-footer__icon {
  margin-inline-start: 22px;
  fill: #666666;
}




